<template>
  <div>
    <r-search
      :searchForm="searchForm"
      :searchHandle="searchHandle"
      :searchData="searchData"
    />
    <r-table
      :isIndex="true"
      :isPagination="true"
      :tableData="tableData"
      :height="350"
      :tableCols="tableCols"
      :tablePage="tablePage"
      @refresh="init()"
    ></r-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      searchData: {
        deviceId: "",
        deviceType: "",
        agent: "",
        saller: ""
      },
      searchForm: [
        {
          type: "input",
          prop: "name",
          placeholder: "Maintenance Personnel",
          width: 150
        },
        {
          type: "input",
          prop: "equipmentNo",
          placeholder: "Device Number",
          width: 150
        },
        {
          type: "select",
          prop: "deviceType",
          placeholder: "设备Type",
          width: 150,
          options: [
            {
              label: "格子柜",
              value: "1"
            },
            {
              label: "弹簧柜",
              value: "2"
            }
          ]
        },
        {
          type: "select",
          prop: "agent",
          placeholder: "分配Agent",
          width: 150,
          options: []
        },
        {
          type: "select",
          prop: "saller",
          placeholder: "分配商家",
          width: 150,
          options: []
        }
      ],
      searchHandle: [
        {
          label: "Search",
          type: "success",
          icon: "el-icon-search",
          handle: e => this.elFormSubmit()
        },
        {
          label: "Reset",
          icon: "el-icon-refresh-right",
          handle: e => this.searchFromReset()
        }
      ],
      tableData: [],
      tableCols: [
        {
          label: "Maintenance PersonnelName",
          prop: "name"
        },
        {
          label: "设备Type",
          prop: "equipmentNo"
          // theme: e => e.status ? 'primary' : 'danger', type: "tag",
        },
        {
          label: "Device Number",
          prop: "equipmentNo"
        },
        {
          label: "分配Agent",
          prop: "regionalName"
        },
        {
          label: "分配商家",
          prop: "merchantName"
        },
        {
          label: "激活时间",
          prop: "activationTime"
        }
      ],
      tablePage: { limit: 10, page: 1, total: 0 }
    };
  },
  components: {},
  computed: {},
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      let param = {
        ...this.searchData,
        ...this.tablePage,
        optorId: this.$route.query.id
      };
      let res = await this.api.focuslist(param);
      if (res) {
        this.tablePage.total = res.data.total;
        this.tableData = res.data.list;
      }
      let operatorId = "";
      let resOpt = await this.api.getOperatorList({});
      if (resOpt) {
        operatorId = resOpt.data.operatorId;
      }
      let resAgent = await this.api.getAgentList({
        userId: operatorId
      });
      let resMerchant = await this.api.getMerchantList({
        userId: operatorId
      });
      if (resAgent) {
        this.searchForm[3].options = [];
        // this.searchForm[2].options = resAgent.data
        for (let i = 0; i < resAgent.data.length; i++) {
          this.searchForm[3].options.push({
            label: resAgent.data[i].name,
            value: resAgent.data[i].agentId
          });
        }
      }
      if (resMerchant) {
        this.searchForm[4].options = [];
        for (let i = 0; i < resMerchant.data.length; i++) {
          this.searchForm[4].options.push({
            label: resMerchant.data[i].name,
            value: resMerchant.data[i].merchantId
          });
        }
      }
    },
    elFormSubmit(e) {
      //查询
      console.log(e);
    },
    elFormDetail(row) {
      Object.keys(this.formData).forEach(key => {
        this.formData[key] = row[key];
      });
      this.formData.id = row.id;
      this.formData.cardId = row.cardId;
      // if (this.formCols[1].label == '登录密码') {
      //     this.formCols.splice(1, 1)
      // }

      this.elFormVisible();
    }
  }
};
</script>
<style scoped lang="scss">
.el-icon-search {
  margin-right: 10px;
}
.Tip {
  margin-left: 20px;
}
</style>
